<template>
    <div class="ele-body">
        <el-card shadow="never">
            <el-form
            :model="where"
            label-width="90px"
            class="ele-form-search"
            @keyup.enter.native="reload"
            @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :lg="12" :md="12">
                        <el-form-item label="结算周期:">
                            <el-date-picker
                                style="width: 100%"
                                v-model="where.record_date"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                label-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="推广员:">
                            <PageSelect
                            :placeholder="'请选择推广员'"
                            v-model="where.promote_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="一级推广员:">
                            <PageSelect
                            :placeholder="'请选择一级推广员'"
                            v-model="where.promote_1_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index?level=1'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="游戏包:">
                            <PageSelect
                                :placeholder="'请选择游戏包'"
                                v-model="where.package_id"
                                :whereName="'package_name'"
                                :url="'/Package/getChannelPackage'"
                                :optionLable="'package_name'"
                                :optionvalue="'id'"
                                :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="状态:" prop="status">
                            <el-select
                                clearable
                                v-model="where.status"
                                placeholder="请选择状态"
                                class="ele-fluid"
                            >
                                <el-option label="申请中" :value="0" />
                                <el-option label="已打款" :value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="结算时间:">
                            <el-date-picker
                                style="width: 100%"
                                v-model="where.jies_time"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                label-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                class="ele-btn-icon"
                                size="small"
                                @click="reload"
                                >查询
                            </el-button>
                            <el-button @click="reset" size="small">重置</el-button>
                            <el-button
                                size="small"
                                @click="exportExcel()"
                            >
                                导出
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :lg="2" :md="4">
                        <el-upload
                            accept=".xls,.xlsx"
                            class="upload-demo"
                            :action="uploadImgUrl"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="successUpload"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="1"
                            :headers="myHeaders"
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                        >
                            <el-button
                            icon="el-icon-upload2"
                            class="ele-btn-icon"
                            size="small"
                            >
                            导入
                            </el-button>
                        </el-upload>
                    </el-col>
                    <el-col :lg="2" :md="4">
                        <el-button
                            type="primary"
                            icon="el-icon-download"
                            class="ele-btn-icon"
                            size="small"
                            @click="templateImport()"
                        >
                            下载导入模板
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 数据表格 -->
            <ele-pro-table
                ref="table"
                :where="where"
                :datasource="url"
                :method="'post'"
                :columns="columns"
                :selection.sync="selection"
                height="calc(100vh - 315px)"
            >
                <!-- 表头工具栏 -->
                <template slot="toolbar">
                    <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-plus"
                        class="ele-btn-icon"
                        @click="editTable(null)"
                        >新增
                    </el-button>
                </template>
                <!-- 操作列 -->
                <template slot="action" slot-scope="{ row }">
                    <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-plus"
                        class="ele-btn-icon"
                        @click="editTable(row)"
                        >修改
                    </el-button>
                </template>
            </ele-pro-table>
        </el-card>
        <!-- 编辑弹窗 -->
        <violation-edit
        :data="current"
        :visible.sync="showEdit"
        @done="reload"/>
    </div>
</template>
<script>
import violationEdit from './violation-edit.vue'
import PageSelect from "@/components/pageSelect/index.vue";
import {downloadExcel} from "@/utils/excel-export";
import setting from '@/config/setting'
export default {
    components:{PageSelect,violationEdit},
    data(){
        let token = setting.takeToken()
        return{
            where:{},
            url:'/Settlementviolation/index',
            uploadImgUrl: process.env.VUE_APP_API_BASE_URL + '/upload/uploadFile',
            myHeaders: { Authorization: token },
            columns:[
                {
                    columnKey: "selection",
                    type: "selection",
                    width: 45,
                    align: "center",
                    fixed: "left"
                },
                {
                    prop: "record_date",
                    label: "日期",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "package_account",
                    label: "游戏",
                    width: 200,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "promote_account",
                    label: "处罚推广员",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "server_role",
                    label: "区服角色",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "role_id",
                    label: "角色id",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "result",
                    label: "交易查询",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "ascription",
                    label: "归属",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "event_money",
                    label: "事件金额",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "remark",
                    label: "事件原因",
                    width: 200,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "status",
                    label: "状态",
                    showOverflowTooltip: true,
                    minWidth: 120,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        if (cellValue == 0) {
                        return "未确认";
                        } else if (cellValue == 1) {
                        return "已确认";
                        }
                    }
                },
                {
                    prop: "jies_status",
                    label: "结算状态",
                    showOverflowTooltip: true,
                    minWidth: 120,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        if (cellValue == 0) {
                        return "未结算";
                        } else if (cellValue == 1) {
                        return "已结算";
                        }
                    }
                },
                {
                    prop: "jies_time",
                    label: "结算时间",
                    width: 160,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "jies_promote_account",
                    label: "结算推广员",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "type",
                    label: "结算类型",
                    showOverflowTooltip: true,
                    minWidth: 120,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        if (cellValue == 0) {
                        return "非日结";
                        } else if (cellValue == 1) {
                        return "日结";
                        }
                    }
                },
                {
                    prop: "update_time",
                    label: "更新时间",
                    width: 160,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    columnKey: "action",
                    label: "操作",
                    width: 150,
                    align: "center",
                    resizable: false,
                    slot: "action",
                    fixed: "right"
                }
            ],
            selection:[],
            showEdit:false,
            // 当前编辑数据
            current: null,
        }
    },
    created(){
        
    },
    mounted(){

    },
    methods:{
        //修改
        editTable(row){
            this.current = row;
            this.showEdit = true;
        },
        /* 刷新表格 */
        reload() {
            this.$refs.table.reload({where: this.where});
        },
        /* 重置搜索 */
        reset() {
            this.where = {};
            this.reload();
        },
        //导出
        exportExcel(){
            downloadExcel(`Settlementviolation/export`, this.where)
        },
        // 导入
        handlePreview(file) {
            console.log(file)
        },
        handleRemove() {
            this.fileList = []
        },
        successUpload(response) {
            this.$set(this.fileList, this.fileList.length, {
                file_name: response.data.file_name,
                save_name: response.data.save_name,
                file_size: response.data.file_size,
                name: response.data.file_name
            })
            let url = response.data.save_name
            this.$http
                .post('/Settlementviolation/importEvent', { url: url })
                .then((res) => {
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    this.fileList = []
                    this.reload()
                } else {
                    this.$message.error(res.data.msg)
                    this.fileList = []
                    this.reload()
                }
                })
        },
        beforeRemove(file) {
            return this.$confirm(`确定移除 ${file.name}？`)
        },
        handleExceed() {
            this.$message.warning(`当前限制选择 1 个文件`)
        },
        // 导入模板
        templateImport() {
            window.location.href = `${process.env.VUE_APP_API_BASE_URL}/static/template/violation_template.xls`
        },
    }
}
</script>
<style scoped>
</style>
